<template>
  <div class="information" v-loading="loading">
    <div class="detail">
      <div class="detail_title">基本信息</div>
      <div class="detail_box">
        <div class="detail_box_one">
          <p class="one_l">商户名称：</p>
          <p class="one_r">{{data.shopName==''?'-':data.shopName}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">联系电话：</p>
          <p class="one_r">{{data.phone==''?'-':data.phone}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">入驻时间：</p>
          <p class="one_r">{{data.createTime==''?'-':data.createTime}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">所属行业：</p>
          <p class="one_r">{{data.shopTypeParentName==''?'-':data.shopTypeParentName}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">所属详细分类：</p>
          <p class="one_r">{{data.shopTypeName==''?'-':data.shopTypeName}}</p>
        </div>
        <div class="detail_box_one">
          <div class="one_l">商户经营地址：</div>
          <div class="one_r">{{data.address==''?'-':data.address}}</div>
        </div>
        <div class="detail_box_one">
          <p class="one_l">地区：</p>
          <p class="one_r">{{data.area==''?'-':data.area}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">发卡报备状态：</p>
          <p class="one_r">{{data.govStatusDict==''?'-':data.govStatusDict}}</p>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail_title">证照信息</div>
      <div class="detail_box">
        <div class="detail_box_one">
          <p class="one_l">经营者名称：</p>
          <p class="one_r">{{data.merchantName==''?'-':data.merchantName}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">企业类型：</p>
          <p class="one_r">{{data.merchantTypeDict==''?'-':data.merchantTypeDict}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">统一社会信用代码/组织机构代码：</p>
          <div class="one_r">{{data.businessLicenseNumber==''?'-':data.businessLicenseNumber}}</div>
        </div>
        <div class="detail_box_one">
          <p class="one_l">法人姓名：</p>
          <p class="one_r">{{data.name==''?'-':data.name}}</p>
        </div>
        <div class="detail_box_one">
          <p class="one_l">注册资金：</p>
          <p class="one_r">{{data.registeredFund==''?'-':data.registeredFund}}</p>
        </div>
        <div class="detail_box_one">
          <div class="one_l">注册地址：</div>
          <div class="one_r">{{data.registeredAddress==''?'-':data.registeredAddress}}</div>
        </div>
        <div class="detail_box_one" style="width:100%">
          <p class="one_l">电子营业执照：</p>
          <p class="one_r acolor" @click="getImg">
            营业执照.jpg
          </p>
        </div>
      </div>
    </div>
    <div class="detail" >
      <div class="detail_title">存管比例与发卡规模</div>
      <div class="detail_box">
        <div class="detail_box_one">
          <p class="one_l">存管比例：</p>
          <p class="one_r">{{data.superviseRatio}}%</p>
        </div>
        <div class="detail_box_one" style="width:100%">
          <p class="one_l">存管释放规则：</p>
          <p class="one_r">根据消费者每次消费释放一次，释放金额=消费金额*存管比例</p>
        </div>
        <div class="detail_box_one" style="width:100%">
          <p class="one_l">最大发卡规模：</p>
          <p class="one_r">{{data.cardMoneyTotal==''?'-':data.cardMoneyTotal}}<span v-if="data.cardMoneyTotal!=''">万</span></p>
        </div>
        <div class="detail_box_one" style="width:100%">
          <p class="one_l">单张卡限额：</p>
          <p class="one_r">{{data.registeredCardLimit==''?'-':data.registeredCardLimit}}</p>
        </div>

      </div>
    </div>
    <div class="back">
      <el-button type="primary" size="medium" @click="back">返回</el-button>
    </div>

    <img-detail-dialog
      v-if="ImgDetailDialog"
      :id="id"
      :imgUrl="data.businessLicenseImg"
      :visible.sync="ImgDetailDialog"
    />
  </div>
</template>
<script>
// components
import Loading from "@/components/Loading/index";
// import DetailDialog from "./information/DetailDialog";
import ImgDetailDialog from "./imgDetailDialog";

// api
import { getMerchantId} from "@/api/insuranceUnderwriting";

export default {
  components: {
    Loading,
    ImgDetailDialog,
  },
  inject: ["merchantId"],
  data() {
    return {
      ImgDetailDialog: false,
      data: {},
      loading:false
    };
  },
  computed: {},
  created() {
    let query = this.$route.query;
    this.id = query.id;
    this.getDetail();
  },
  methods: {
    //获取基本信息
    getDetail() {
      console.log(this.merchantId);
      this.loading = true;
      getMerchantId(this.merchantId)
        .then((res) => {
          console.log("获取详情", res);
          const { result } = res;
          // result.statusText = this.$getStatusText('quality_cert_verify_status', result.status)
          this.data = result;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    _handleSuccess() {},
    //查看照片
    getImg() {
      console.log("查看照片", this.data.businessLicenseImg);
      this.ImgDetailDialog = true;
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    handleSuccess(msg) {
      if (msg === "已拒绝") {
        var type = "error";
      } else {
        var type = "success";
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          // this.handleClose()
          this.$emit("success");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/merchantsDetail";
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }
  .main {
    margin: 0 auto;
  }
  .pic-list {
    display: flex;
    justify-content: space-around;
    width: 660px;
  }
  .img {
    display: block;
    width: 200px;
    height: auto;
  }
}
.detail {
  padding: 0 5px;
  margin-bottom: 20px;
}
.detail_title {
  font-size: 20px;
  color: #000;
  font-weight: 600;
  border-left: 5px solid #1890ff;
  padding-left: 10px;
}
.detail_box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 40px;
  padding: 0 20px;
}
.detail_box_one {
  font-size: 15px;
  color: #333;
  width: calc(100% / 3);
  margin-bottom: 20px;
  display: flex;
}
.one_r {
  flex: 1;
  word-break: break-all;
}
.acolor {
  color: #1890ff;
  cursor: pointer;
}
.scolor {
  color: #ff600b;
}
</style>
